<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
    <text class="block text-[56rpx] font-extrabold mb-[48rpx] text-center text-blue-600 drop-shadow">身体特征</text>
    
    <nut-form ref="formRef" :model="form" :rules="formRules" class="max-w-[700rpx] w-full mx-auto box-border">
      <!-- 基本信息区域 -->
      <view class="bg-white rounded-[20rpx] shadow-[0_4rpx_24rpx_rgba(0,0,0,0.08)] p-[32rpx] mb-[32rpx] box-border">
        <text class="block text-[36rpx] font-bold mb-[32rpx] text-gray-800">📏 身体测量</text>
        
        <nut-form-item label="身高" prop="身高" class="mb-[32rpx] text-[32rpx]">
          <view class="flex items-center">
            <nut-input 
              v-model="form.身高" 
              placeholder="请输入身高"
              type="number"
              class="flex-1 h-[88rpx] text-[32rpx] bg-gray-50 rounded-[12rpx] px-[24rpx]"
              @input="onHeightInput"
              @blur="validateField('身高')"
            />
            <text class="ml-[20rpx] text-[32rpx] text-gray-600 font-medium">cm</text>
          </view>
          <view v-if="heightError" class="text-[28rpx] text-red-500 mt-[12rpx]">
            {{ heightError }}
          </view>
        </nut-form-item>
        
        <nut-form-item label="体重" prop="体重" class="mb-[32rpx] text-[32rpx]">
          <view class="flex items-center">
            <nut-input 
              v-model="form.体重" 
              placeholder="请输入体重"
              type="number"
              class="flex-1 h-[88rpx] text-[32rpx] bg-gray-50 rounded-[12rpx] px-[24rpx]"
              @input="onWeightInput"
              @blur="validateField('体重')"
            />
            <text class="ml-[20rpx] text-[32rpx] text-gray-600 font-medium">kg</text>
          </view>
          <view v-if="weightError" class="text-[28rpx] text-red-500 mt-[12rpx]">
            {{ weightError }}
          </view>
        </nut-form-item>
      </view>
      
      <!-- BMI 计算显示 -->
      <view v-if="bmi" class="bg-white rounded-[20rpx] shadow-[0_4rpx_24rpx_rgba(0,0,0,0.08)] p-[32rpx] mb-[32rpx] box-border">
        <text class="block text-[36rpx] font-bold mb-[24rpx] text-gray-800">📊 BMI 指数</text>
        <view class="flex items-center justify-between mb-[16rpx]">
          <text class="text-[48rpx] font-bold" :class="bmiColorClass">{{ bmi }}</text>
          <text class="text-[32rpx] text-gray-600 font-medium">{{ bmiStatus }}</text>
        </view>
        <text class="block text-[28rpx] text-gray-500 leading-relaxed">
          正常范围: 18.5 - 24.9
        </text>
      </view>
      
      <!-- 操作按钮 -->
      <view class="mt-[48rpx] flex gap-[24rpx]">
        <nut-button 
          block 
          type="default" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1"
          @click="resetForm"
        >
          重置
        </nut-button>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1 bg-green-500 hover:bg-green-600 active:bg-green-700"
          @click="submitForm"
        >
          保存身体特征
        </nut-button>
      </view>
    </nut-form>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref, reactive, computed } from 'vue'
// import { 
//   Form as NutForm, 
//   FormItem as NutFormItem, 
//   Input as NutInput,
//   Button as NutButton
// } from '@nutui/nutui-taro'

/**
 * 身体特征表单数据
 * @typedef {Object} BodyFeature
 * @property {string} 身高
 * @property {string} 体重
 */
const form = ref({
  身高: '',
  体重: ''
})

const formRef = ref()
const heightError = ref('')
const weightError = ref('')

// 表单验证规则
const formRules = reactive({
  身高: [
    { required: true, message: '请输入身高' },
    { 
      validator: (value: string) => {
        const height = parseFloat(value)
        return height >= 50 && height <= 250
      }, 
      message: '身高应在50-250cm之间' 
    }
  ],
  体重: [
    { required: true, message: '请输入体重' },
    { 
      validator: (value: string) => {
        const weight = parseFloat(value)
        return weight >= 20 && weight <= 300
      }, 
      message: '体重应在20-300kg之间' 
    }
  ]
})

// BMI 计算
const bmi = computed(() => {
  const height = parseFloat(form.value.身高)
  const weight = parseFloat(form.value.体重)
  
  if (height && weight && height > 0) {
    const heightInMeters = height / 100
    const bmiValue = weight / (heightInMeters * heightInMeters)
    return bmiValue.toFixed(1)
  }
  return null
})

// BMI 状态和颜色
const bmiStatus = computed(() => {
  if (!bmi.value) return ''
  
  const bmiValue = parseFloat(bmi.value)
  if (bmiValue < 18.5) return '偏瘦'
  if (bmiValue < 24) return '正常'
  if (bmiValue < 28) return '偏胖'
  return '肥胖'
})

const bmiColorClass = computed(() => {
  if (!bmi.value) return ''
  
  const bmiValue = parseFloat(bmi.value)
  if (bmiValue < 18.5) return 'text-blue-600'
  if (bmiValue < 24) return 'text-green-600'
  if (bmiValue < 28) return 'text-orange-600'
  return 'text-red-600'
})

// 输入验证
const onHeightInput = (value: string) => {
  const height = parseFloat(value)
  if (value && (height < 50 || height > 250)) {
    heightError.value = '身高应在50-250cm之间'
  } else {
    heightError.value = ''
  }
}

const onWeightInput = (value: string) => {
  const weight = parseFloat(value)
  if (value && (weight < 20 || weight > 300)) {
    weightError.value = '体重应在20-300kg之间'
  } else {
    weightError.value = ''
  }
}

// 字段验证（兼容没有 validateField 的场景）
const validateField = async (fieldName: string) => {
  if (!formRef.value) return true
  const maybeForm: any = formRef.value
  if (typeof maybeForm.validateField === 'function') {
    return maybeForm.validateField(fieldName)
  }
  if (typeof maybeForm.validate === 'function') {
    return maybeForm.validate()
  }
  return true
}

// 重置表单
const resetForm = () => {
  form.value = {
    身高: '',
    体重: ''
  }
  heightError.value = ''
  weightError.value = ''
  Taro.showToast({
    title: '已重置',
    icon: 'success',
    duration: 1500
  })
}

// 表单提交
const submitForm = async () => {
  try {
    await formRef.value.validate()

    // 显示成功提示
    Taro.showToast({
      title: '保存成功',
      icon: 'success',
      duration: 2000
    })

    // 这里可以添加实际的保存逻辑
    // 身体特征数据
    // BMI

  } catch (error) {
    // 显示错误提示
    Taro.showToast({
      title: '请完善必填信息',
      icon: 'error',
      duration: 2000
    })
  }
}
</script>

<!--
性能优化说明：
- 使用max-w-[750rpx]确保页面不超出屏幕宽度
- 表单分区域展示，提升用户体验
- 所有输入框添加背景色和圆角，视觉更统一
- BMI计算使用computed，避免重复计算
- 按钮使用flex布局，响应式适配
- 页面使用box-border确保布局稳定
--> 